<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      </el-breadcrumb>
      <br>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-button type="primary" size="mini" @click="addDialogVisible=true">添加</el-button>
        </el-col>
      </el-row>
      <br>
      <el-card>
        <div>
          <el-table
            ref="table"
            border
            stripe
            :data="list"
            style="width: 100%">
            <el-table-column
              prop="id"
              label="编号">
            </el-table-column>
            <el-table-column
              prop="username"
              label="昵称"
            ></el-table-column>
            <el-table-column
              prop="phone"
              label="手机号码"
            ></el-table-column>
            <el-table-column
              prop="password"
              label="密码"
            ></el-table-column>
            <el-table-column
              prop="createAt"
              label="创建时间"
            ></el-table-column>
            <el-table-column
              prop="email"
              label="邮箱账号"
            ></el-table-column>

            <el-table-column
              prop="status"
              label="账户状态"
            >
              <template slot-scope="x">
                <p v-if="x.row.status==1" style="color: blue">正常</p>
                <p v-if="x.row.status==0" style="color: red">异常</p>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="showOne(scope.row)">更新</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="remove(scope.row.id)" >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :page-size.sync="pageSize"
            :page-sizes="pageSizes"
            :current-page.sync="currentPage"
            background

            @current-change="handleCurrentChange"
            layout="sizes, prev, pager, next, jumper, ->, total"
            :total="total">
          </el-pagination>
        </div>
      </el-card>


      <!--添加用户的对话框-->
      <el-dialog
        title="添加用户"
        :visible.sync="addDialogVisible"
        width="30%"
      >
        <el-form ref="form" :model="user" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="user.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="user.phone" placeholder="请输入手机"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addOne">添加</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--修改用户的对话框-->
      <el-dialog
        title="修改用户"
        :visible.sync="updateDialogVisible"
        width="30%"
      >
        <el-form ref="form" :model="user" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="user.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="user.phone" placeholder="请输入手机"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateOne">更新</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "User",
      data(){
          return {
            list:[],
            pageSize:5,
            pageSizes:[5],
            currentPage:1,
            total:1,
            addDialogVisible:false,
            updateDialogVisible:false,
            user:{}
          }
      },
      created() {
        this.handleAClick(1)
      },
      methods:{
        handleAClick(i){
          this.axios.get("/ZuaMarket/User/users?pageNum="+i).then(resp => {
            let data = resp.data;
            this.list = data.list;
            this.total = data.total;
          })
        },
        handleCurrentChange(page){
          this.handleAClick(page);
        },
        addOne(){
          this.addDialogVisible = false;
          this.axios.post("/ZuaMarket/User/users",this.user).then(resp=>{
            if(resp.data.status == "success"){
              this.handleAClick(1);
              alert("添加成功");
            }else{
              alert("添加失败");
            }
          }).catch(err => {
            console.log(err);
          })
          this.user = {};
        },
        remove(i){
          console.log(i);
          let isDelete = confirm("确定删除吗?");
          if (!isDelete) {
            return;
          }
          this.axios.delete("/ZuaMarket/User/users/"+i).then(resp => {

            let responseData = resp.data;
            console.log(responseData);
            if (responseData.status == "success") {
              alert("删除成功");
              this.handleAClick(this.currentPage);
            } else {
              alert("删除失败");
            }
          }).catch(err => {
            console.log(err);
          })
        },
        showOne(row){
          this.user = JSON.parse(JSON.stringify(row));
          this.updateDialogVisible = true;
        },
        updateOne(){
          this.updateDialogVisible = false;
          this.axios.put("/ZuaMarket/User/users",this.user).then(resp=>{
            if(resp.data.status == "success"){
              alert("更新成功");
              this.handleAClick(this.currentPage);
            }else{
              alert("更新失败");
            }
          }).catch(err => {
            console.log(err);
          })
          this.user={};
        },
        cancel(){
          this.user={};
          this.updateDialogVisible = false;
          this.addDialogVisible = false;

        }
      }
    }
</script>

<style scoped>

</style>
